<template>
	<view>
		<!-- <view class="bb" v-for="i in datas">
			{{i.name}}
		</view> -->
		
		
		<view class="top">
			<image :src="user.imgs" mode=""></image>
			<button class="btn" @click="git">点击登录</button>
		</view>
		<!-- <view >
			跳转支付
		</view>
		<view >
			跳转关注
		</view> -->
		<!-- 功能模块 -->
				<view class="api">
					<view class="api-item">
						<image src="../../static/message/sort.png" mode=""></image>
						<text>订阅</text>
					</view>
					<view class="api-item" @click="toJoin">
						<image src="../../static/message/sort3.png" mode=""></image>
						<text>关注</text>
					</view>
					<view class="api-item">
						<image src="../../static/message/sort4.png" mode=""></image>
						<text>浏览</text>
					</view>
					<view class="api-item">
						<image src="../../static/message/sort6.png" mode=""></image>
						<text>看房管理</text>
					</view>
				</view>

		<view class="content">

			<view class="list-item"  @click="topay">
				<!-- 左logo -->
				<image class="logo" src="../../static/message/money.png" mode=""></image>
				<!-- 右 -->
				<view class="right-box">
					<view class="title">我的钱包</view>
					<view class="right-text">
						<!-- <text>哈哈哈</text> -->
						<!-- 三角 -->
						<view class="triangle"></view>
					</view>

				</view>
			</view>
			<view class="list-item" @click="toatt">
				<!-- 左logo -->
				<image class="logo" src="../../static/message/gunazhu.png" mode=""></image>
				<!-- 右 -->
				<view class="right-box">
					<view class="title">关注服务号</view>
					<view class="right-text">
						<text>获取最新政策、咨询</text>
						<!-- 三角 -->
						<view class="triangle"></view>
					</view>
				</view>
			</view>
			<view class="list-item" @click="phone">
				<!-- 左logo -->
				<image class="logo" src="../../static/message/kefu.png" mode=""></image>
				<!-- 右 -->
				<view class="right-box">
					<view class="title">客服电话</view>
					<view class="right-text">
						<text>10106182</text>
						<!-- 三角 -->
						<view class="triangle"></view>
					</view>

				</view>
			</view>
			<view class="list-item" @click="tomine">
				<!-- 左logo -->
				<image class="logo" src="../../static/message/about.png" mode=""></image>
				<!-- 右 -->
				<view class="right-box">
					<view class="title">关于我们</view>
					<view class="right-text">
						<!-- <text>哈哈哈</text> -->
						<!-- 三角 -->
						<view class="triangle"></view>
					</view>

				</view>
			</view>
			<view class="list-item" @click="tojoin">
				<!-- 左logo -->
				<image class="logo" src="../../static/message/join.png" mode=""></image>
				<!-- 右 -->
				<view class="right-box">
					<view class="title">加入贝壳</view>
					<view class="right-text">
						<!-- <text>哈哈哈</text> -->
						<!-- 三角 -->
						<view class="triangle"></view>
					</view>

				</view>
			</view>
			<view class="list-item" @click="toimplicit">
				<!-- 左logo -->
				<image class="logo" src="../../static/message/yinsi.png" mode=""></image>
				<!-- 右 -->
				<view class="right-box">
					<view class="title">隐私政策</view>
					<view class="right-text">
						<!-- 三角 -->
						<view class="triangle"></view>
					</view>

				</view>
			</view>


		</view>
		
		
		
		
		
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
				user:{
					openid:"",
					name:"",
					imgs:""
				}
			}
		},
		created(){
			
		},
		
		methods: {
			phone(){
				uni.makePhoneCall({
					phoneNumber:"10106188",
				})
			},
			toimplicit(){
				uni.navigateTo({
					url:"/pages/my/implicit"
				})
			},
			tojoin(){
				uni.navigateTo({
					url:"/pages/my/join"
				})
			},
			tomine(){
				uni.navigateTo({
					url:"/pages/my/mine"
				})
			},
			toatt(){
				uni.navigateTo({
					url:'/pages/my/attention'
				})
			},
			topay(){
				uni.navigateTo({
					url:"/pages/my/pay"
				})
			},
			//登录
			git(){
				let _this = this
				uni.login({
					success(res) {
						// console.log(res);
						let {code} = res
						uni.getUserInfo({
							success(res) {
								// console.log(res);
							_this.user.name = 	res.userInfo.nickName
							_this.user.imgs = 	res.userInfo.avatarUrl
							
							}
						}),
						uni.request({
							url: "https://api.weixin.qq.com/sns/jscode2session",
						    method:"GET",
							data:{
								appid:"wx99f053d2da99dbfd",
								secret:"a0c8a11d1f663de246bc54747deca00c",
								js_code:code,
								grant_type:"authorization_code"
							},
							success(res) {
								console.log(res);
							}
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
.top{
	height: 300rpx;
	width: 100%;
	background:#4e7bf1 ;
	display: flex;
	align-items: center;
	image{
		width: 100rpx;
		height: 100rpx;
		// padding-left: 50rpx;
		margin-left: 50rpx;
		margin-right: 10rpx;
		border-radius: 50%;
	}
	.btn{
		height: 100rpx;
		width: 50%;
		margin: 0;
		// padding-right: 40rpx;
	}
}
// 功能模块
  .api {
   display: flex;
   justify-content: space-evenly;
   background-color: #fff;

   .api-item {
    display: flex;
    flex-direction: column;
    // justify-content: center;
    align-items: center;
    padding: 60rpx 0;

    image {
     width: 70rpx;
     height: 70rpx;
    }
   }
  }
.content {

			.list-item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 126rpx;
				// border-bottom: 1rpx solid #ccc;
				background-color: #fff;
				padding: 0 46rpx;

				&:nth-child(1) {
					margin: 17rpx 0;
				}
				// 左logo
				.logo {
					width: 40rpx;
					height: 40rpx;
					margin-right: 20rpx;
				}

				// 右
				.right-box {
					display: flex;
					height: 100%;
					align-items: center;
					justify-content: space-between;
					flex: 1;
					border-bottom: 1rpx solid #ccc;

					.right-text {
						display: flex;
						align-items: center;
						text{
							color: #ccc;
						}
						.triangle {
							width: 20rpx;
							height: 20rpx;
							border-top: 2rpx solid #ccc;
							border-right: 2rpx solid #ccc;
							transform: rotate(45deg);
							margin: 0 20rpx;
						}
					}
				}
			}
		}
	
</style>
